<template>
	<view class="page">
		<NavbarHead :toTop="false" titleColor="#ffffff" titleText=" " bgColor="rgba(0,0,0,0)"></NavbarHead>
		<!-- 头部 -->
		<!-- 	<image src="https://wyc.jslhkj.cn/uploads/20231031/61fdba49dff841cde071dddabaed0a5e.jpg" mode=""
			class="bg-login"></image> -->

		<view class="bg-login">

		</view>
		<view class="topBox" :style="{ 'padding-top': topHeadHeight + 20 + 'rpx' }">
			<view class="userBox" @click="toUrl('/subPages/userInfo/userInfo')">
				<view class="">
					<image class="userBox-picture" src="../../static/images/my/avatar.png" mode="" v-if="notLogin">
					</image>
					<image class="userBox-picture" :src="userInfo.avatar" mode="" v-else></image>
				</view>
				<view class="userBox-userInfo">
					<view class="u-line-1" v-if="notLogin" @click="toUrl('/subPages/login/login')">
						点击登录
					</view>
					<view class="u-line-1" v-else>
						{{ userInfo.nickname || '' }}
					</view>
				</view>
			</view>

		</view>
		<!-- 基本功能 -->
		<view class="funBox">

			<view class="listBox" v-for="(item,index) in funBoxTopList" :key="index" @click="navigateTo" :data-url="item.url">
				<image class="icon" :src="item.iconUrl" mode=""></image>
				<view class="name">{{item.name}}</view>
				<view v-if="index == 0" class="orderTotal" v-show="total > 0">
					{{total ? total : '0'}}
				</view>
				<image class="arrow" src="../../static/images/my/more.png" mode=""></image>
			</view>

			<view class="listBox" @click="toUrl('/subPages/coupon/couponList')">
				<image class="icon" src="../../static/images/my/youhui.png" mode=""></image>
				<view class="mb-box">
					<view>我的优惠券</view>
					<view>可用{{couponNum}}张</view>
				</view>
				<image class="arrow" src="../../static/images/my/more.png" mode=""></image>
			</view>

			<view class="listBox" @click="toUrl('/subPages/integralList/integralList')">
				<image class="icon" src="../../static/images/my/mibi.png" mode=""></image>
				<view class="mb-box">
					<view>我的积分</view>
					<view>{{userInfo.score}}积分</view>
				</view>
				<image class="arrow" src="../../static/images/my/more.png" mode=""></image>
			</view>

		</view>

		<view class="funBox2">

			<view class="listBox" @click="navigateTo" data-url="/subPages/feedBack/feedBack">
				<image class="icon" src="../../static/images/my/yijian.png" mode=""></image>
				<view class="name">意见反馈</view>
				<image class="arrow" src="../../static/images/my/more.png" mode=""></image>
			</view>

		</view>

		<!-- 功能服务 -->
		<!-- 		<view class="module-box">
			<view class="module-title">
				更多
			</view>
			<view class="module-list">
				<view class="module-item" v-for="item in funList" :key="index" @click="navigateTo"
					:data-url="item.rules">
					<view class="img-box">
						<image class="img" :src="item.icon"></image>
					</view>
					<view class="module-item-name">
						{{item.name}}
					</view>
				</view>
			</view>
		</view> -->


		<!-- <view class="mkkj-ad">江苏六好信息科技提供技术支持</view> -->

		<!-- 客服咨询弹出框 -->
		<view class="mask" v-if="popShow" @click="popChange"></view>
		<view class="ListPanel" v-if="popShow">

			<view class="panel-cell">
				<view class="panel-cell-left1">
					<view class="iconfont icon-zaixiankefu"></view>
				</view>
				<view class="panel-cell-right">
					<view class="panel-cell-right-title">
						在线客服
					</view>
					<view class="">
						周一至周日 8:00-24:00
					</view>
					<view class="">
						UTC+8
					</view>
				</view>
			</view>

			<view class="panel-cell">
				<view class="panel-cell-left2">
					<view class="iconfont icon-24gf-telephone"></view>
				</view>
				<view class="panel-cell-right">
					<view class="panel-cell-right-title">
						电话联系
					</view>
					<view class="">
						+86 4007000303
					</view>
					<view class="">
						周一至周日 8:00-24:00
					</view>
					<view class="">
						UTC+8
					</view>
				</view>
			</view>

			<view class="cancle-btn" @click="popChange">
				取消
			</view>
		</view>

	</view>
</template>

<script>
	import NavbarHead from '../../components/NavbarHead/NavbarHead.vue'
	export default {
		data() {
			return {
				topHeadHeight: 172, //顶部导航栏高度
				userInfo: {
					score: 0
				}, // 用户信息
				funBoxTopList: [{
						name: '我的订单',
						iconUrl: '../../static/images/my/order.png',
						url: '/subPages/orderList/orderList?type=1'
					},
					{
						name: '我的地址',
						iconUrl: '../../static/images/my/dizhi.png',
						url: '/subPages/addressList/addressList'
					}
				],
				notLogin: false, //判断用户是否登录
				funList: [], //功能列表
				popShow: false, //客服咨询弹窗
				couponNum: 0, //可用优惠券数量
				total: '', //订单数量
			}
		},
		components: {
			NavbarHead
		},
		async onLoad() {

			// 计算顶部导航栏高度
			this.topHeadHeight = uni.getStorageSync('headHeight') * 2 || 172;






		},
		async onShow() {
			if (!uni.getStorageSync('token')) {
				this.notLogin = true
				return
			}

			this.notLogin = false
			this.getuserinfo();
			// this.getjmconf();
			// this.getmycouponlist(); //获取我的优惠券

			let res = await this.$api.getOrderList({
				uid: wx.getStorageSync('userInfo').uid,
				type: 1,
				status: 1
			})
			this.total = res.data.total
		},
		methods: {
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			async getmycouponlist() {
				let res = await this.$api.getmycouponlist({
					uid: this.uid
				});

				this.couponNum = res.data.total;
			},
			popChange() {
				this.popShow = !this.popShow
			},
			takePhone() {
				wx.makePhoneCall({
					phoneNumber: '18168056830'
				})
			},
			// 商家登陆
			merchantLogin() {
				// 0没登陆过，1是之前登录过
				if (this.userInfo.is_login) {
					uni.navigateTo({
						url: '/subPages/merchant/merchant'
					})
				} else {
					uni.navigateTo({
						url: '/subPages/merchant/login'
					})
				}
			},
			// 跳转函数
			navigateTo(e) {
				console.log(e);
				if (e.currentTarget.dataset.url == 'kfzx') {
					this.popShow = !this.popShow;
					return
				}

				wx.navigateTo({
					url: e.currentTarget.dataset.url,
				})
			},
			// 客服点击
			async kefuClick() {
				let res = await this.$api.mykefu()
				uni.makePhoneCall({
					phoneNumber: res.data
				})
			},
			// 获取审核状态
			async toEnter() {
				let res = await this.$api.merchEnter()
				if (res.data.status === 0) {
					uni.navigateTo({
						url: `/subPages/enter/enter`
					})
				} else {
					uni.navigateTo({
						url: `/subPages/auditStatus/auditStatus?obj=${JSON.stringify(res.data)}`
					})
				}
			},
			// 获取个人信息
			async getuserinfo() {
				let res = await this.$api.getuserinfo({
					uid: wx.getStorageSync('userInfo').uid
				})
				this.userInfo = res.data
			},
			//获取功能列表
			async getjmconf() {
				let res = await this.$api.getjmconf();
				this.funList = res.data;
			},
		}
	}
</script>
<style>
	page {
		/* background-color: #fff; */
		width: 100vw;
		height: 100vh;
		/* overflow: hidden; */
	}
</style>

<style lang="scss" scoped>
	.orderTotal {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: rgb(255, 165, 0);
		text-align: center;
		color: #fff;
		margin-right: 20rpx;
		font-size: 22rpx;
		line-height: 30rpx;
	}

	.topBox {
		background-size: 100%;
		// background-color: white;
		color: red;
		padding-bottom: 50rpx;
	}

	.bg-login {
		width: 100vw;
		height: 480rpx;
		position: absolute;
		z-index: -100;
		// background-color: #00aaff;
		background: linear-gradient(to top, #ffffff, #0075af);
	}

	.userBox-userInfo {
		color: white;
	}

	.userBox {
		text-align: center;
		margin-top: 20rpx;

		&-picture {
			margin: 0 20rpx 0 32rpx;
			width: 102rpx;
			height: 102rpx;
			border-radius: 50%;
			opacity: 1;
			border: 4rpx solid rgba(255, 255, 255, 1);
		}

		&-userInfo {
			flex: 1;
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
		}

		&-right {
			width: 144rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 100rpx 0 0 100rpx;
			opacity: 0.9;
			background: rgba(255, 255, 255, 1);
			color: $textColor;
			font-size: 24rpx;
			font-weight: 400;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}
	}

	.integral {
		box-sizing: border-box;
		padding: 32rpx;
		width: 686rpx;
		margin: 40rpx auto 0;
		border-radius: 30rpx 30rpx 0 0;
		background: rgba(255, 255, 255, 0.7);

		&-title {
			color: $textColor;
			font-size: 24rpx;
			font-weight: 500;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 22rpx;
				height: 22rpx;
				margin-left: 5rpx;
				vertical-align: middle;
			}
		}

		&-main {
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.num {
				color: rgba(0, 0, 0, 0.8);
				font-size: 52rpx;
				font-weight: 600;
			}

			.rightBtn {
				text {
					margin-right: 12rpx;
					display: inline-block;
					width: 96rpx;
					height: 48rpx;
					border-radius: 32rpx;
					opacity: 1;
					background: rgba(255, 255, 255, 1);
					color: $textColor;
					font-size: 24rpx;
					font-weight: 400;
					text-align: center;
					line-height: 48rpx;
				}

				.btn {
					background: radial-gradient(235.8% 163.9% at 132.1% 0%, rgba(255, 245, 252, 1) 0%, rgba(208, 132, 255, 1) 23%, rgba(121, 101, 255, 1) 56.99999999999999%, rgba(131, 111, 255, 1) 82%, rgba(130, 111, 255, 1) 100%);
					color: #ffffff;
				}
			}
		}
	}

	.funBox {
		box-sizing: border-box;
		padding: 12rpx 32rpx;
		z-index: 99;
		width: 100%;
		border-radius: 32rpx 32rpx 0 0;
		background: rgba(255, 255, 255, 1);
		margin-top: 20rpx;
	}

	.funBox2 {
		box-sizing: border-box;
		padding: 0rpx 32rpx;
		z-index: 99;
		width: 100%;
		// border-radius: 32rpx 32rpx 0 0;
		background: rgba(255, 255, 255, 1);
		margin-top: 20rpx;
	}

	.funBox-top {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.topItem {
			image {
				width: 96rpx;
				height: 96rpx;
				opacity: 1;
				border-radius: 50%;
				vertical-align: top;
			}

			.name {
				margin-top: 14rpx;
				color: rgba(0, 0, 0, 0.8);
				font-size: 24rpx;
				font-weight: 400;
			}
		}
	}

	.imgBox {
		margin: 42rpx auto 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 334rpx;
			height: 178rpx;
			opacity: 1;
		}
	}

	.listBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		margin-left: 20rpx;

		.name {
			flex: 1;
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
			font-weight: 400;
		}

		.mb-box {
			display: flex;
			flex: 1;
			justify-content: space-between;
			color: rgba(0, 0, 0, 0.9);
			font-size: 28rpx;
			font-weight: 400;
			padding-right: 20rpx;
		}

		.icon {
			margin-right: 16rpx;
			width: 36rpx;
			height: 36rpx;
		}

		.arrow {
			width: 16rpx;
			height: 16rpx;
		}
	}

	.module-box {
		margin: 20rpx 0;
		// width: calc(100% - 40rpx);
		width: 100%;
		margin-top: 20rpx;
		padding: 0 0 20rpx 0;
		background-color: white;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #333;
	}

	.module-title {
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 40rpx;
		font-weight: 700;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.module-list {
		display: flex;

		flex-wrap: wrap;
	}

	.module-item {
		width: 25%;
		// height: 80rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.module-icon {
		font-size: 48rpx;
		color: #2e8ccb;
		height: 60rpx;
		line-height: 60rpx;
	}

	.wxAuth {
		height: 56rpx;
		line-height: 56rpx;
		font-size: 24rpx;
		width: 175rpx !important;
	}

	.userinfo-button {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #2e8ccb;
		color: white;
	}

	.coin-unit {
		width: 24rpx;
		height: 24rpx;
	}

	.senyera-unit {
		width: 24rpx;
		height: 24rpx;
	}

	.head-btn {
		width: 122rpx !important;
		border-radius: 100rpx;
		height: 122rpx;
	}

	.kf-box {
		position: relative;
	}

	.kf {
		position: absolute;
		top: 0rpx;
		height: 120%;
		width: 100% !important;
		opacity: 0;
	}

	.img {
		width: 48rpx;
		height: 48rpx;
	}

	.module-item-name {
		height: 60rpx;
		line-height: 60rpx;
	}

	// 客服咨询弹窗
	.ListPanel {
		background-color: white;
		width: 100vw;
		height: 460rpx;
		position: fixed;
		bottom: 0vh;
		right: 0;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		z-index: 101;
		background-color: #f8f9fb;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;

		.panel-cell {
			height: 110rpx;
			padding: 30rpx 20rpx;
			background-color: white;
			display: flex;

			&-left1 {
				width: 80rpx;
				height: 80rpx;
				margin: 15rpx;
				border-radius: 50rpx;
				background-color: #333;
				// border-radius: ;
				margin-right: 20rpx;

				.icon-zaixiankefu {
					color: white;
					font-size: 50rpx;
					padding: 15rpx;
				}
			}

			&-left2 {
				width: 80rpx;
				height: 80rpx;
				margin: 15rpx;
				border-radius: 50rpx;
				background-color: #40cf2c;
				// border-radius: ;
				margin-right: 20rpx;

				.icon-24gf-telephone {
					color: white;
					font-size: 50rpx;
					padding: 15rpx;
				}
			}

			&-right {
				font-size: 24rpx;
				color: #666;

				&-title {
					font-weight: 700;
					color: #000;
					font-size: 28rpx;
				}
			}
		}

		.panel-cell:nth-of-type(1) {
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-bottom: 1rpx solid #eee;
		}
	}



	.mask {
		background-color: rgba(0, 0, 0, 0.3);
		top: 0;
		left: 0;
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 99;
	}



	.contact {
		width: 80vw;
		border-radius: 50rpx;
		background-color: #111;
		color: white;
	}

	.lhlg {
		width: 100rpx;
		height: 100rpx;
	}

	.mkkj-ad {
		font-size: 20rpx;
		padding-bottom: 40rpx;
	}

	.cancle-btn {
		text-align: center;
		background-color: white;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 20rpx;
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>